<template>
  <div>
    <head-top title="登录" handle="注册" @handle="handle"></head-top>
    <div class="form-login">
      <van-form @submit="gologin">
        <van-field
          v-model="user.username"
          name="username"
          placeholder="请输入用户名"
          :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            {
              validator: usernameRegular,
              message: '请输入5-10个以字母开头的字串'
            }
          ]"
        />
        <van-field
          v-model="user.pwd"
          :type="pswtype"
          name="pwd"
          placeholder="请输入密码"
          :rules="[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { validator: pswRegular, message: '请输入5-12个字母、数字、下划线' }
          ]"
        />
        <van-icon name="eye-o" @click="ccll()" v-if="changestyle" />
        <van-icon name="closed-eye" @click="ccll()" v-if="!changestyle" />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { userLogin } from '_api'
import { Toast } from 'vant'
import HeadTop from '../../components/headtop.vue'
export default {
  components: { HeadTop },
  data () {
    return {
      user: {
        username: '',
        pwd: ''
      },
      changestyle: false,
      pswtype: 'password'
    }
  },
  methods: {
    ccll () {
      this.changestyle = !this.changestyle
      if (this.changestyle === true) {
        this.pswtype = 'text'
      } else {
        this.pswtype = 'password'
      }
    },
    usernameRegular (val) {
      return /^[a-zA-Z0-9]{5,10}$/.test(val)
    },
    pswRegular (val) {
      return /^(\w){5,12}$/.test(val)
    },
    gologin (msg) {
      userLogin({
        deviceId: '设备ID：6666',
        deviceName: '设备名称：66666',
        ...msg
      }).then((res) => {
        if (res.data.code === 0) {
          Toast.success({
            message: '登录成功',
            duration: 1500,
            onClose: () => {
              localStorage.setItem('token', res.data.data.token)
              this.$router.replace('/home')
            }
          })
        } else {
          Toast.fail({
            message: res.data.msg,
            duration: 1500
          })
          this.user.username = ''
          this.user.pwd = ''
        }
      })
    },
    handle () {
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="scss" scoped>
.item-head {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.15rem 0;
  box-sizing: border-box;
  height: 0.88rem;
  display: flex;
  border-bottom: 1px solid #ff344d;
  .back,
  .changestyle {
    text-align: center;
    width: 18%;
    font-size: 0.28rem;
    line-height: 0.56rem;
  }
  .gosearch {
    flex: 1;
    text-align: center;
    font-size: 0.32rem;
    line-height: 0.56rem;
    color: #000;
  }
}
/deep/ .el-form-item__error {
  left: 0.2rem !important;
  padding-top: 0 !important;
}
.form-login {
  height: 100vh;
  background: #f3f5f7;
  /deep/ form.van-form {
    padding: 1.2rem 0.4rem 0;
    .van-icon-eye-o,
    .van-icon-closed-eye {
      width: 0.28rem;
      position: absolute;
      right: 0.9rem;
      top: 2.8rem;
      z-index: 9999999999;
    }
    .van-cell {
      background: #f3f5f7;
      padding: 0 0.32rem 0.54rem;
    }
    input {
      background: #fff;
      padding: 0 0.2rem;
      border-radius: 0.1rem;
      box-sizing: border-box;
      height: 0.8rem;
    }
    .van-field__error-message {
      position: absolute;
    }
    .van-button {
      height: 0.74rem;
      border-radius: 0.1rem;
      background: #ff344d;
      border: none;
    }
  }
}
</style>
